<template>
  <div class="app-car-container" v-loading="loading">
    <CustomContent>
      <template v-slot:body>
        <el-form ref="form" :model="form" label-width="110px">
          <el-row>
            <el-col :span="24">
              <MmvTitle title="车辆信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="24" class="table-rf">
              <el-descriptions
                class="margin-top margin-bottom"
                :column="3"

                :labelStyle="{ textAlign: 'left' }"
                border
              >
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 车辆信息</template>
                  {{ form.carInfo }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 车牌号</template>
                  {{ form.carNo }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 车架号</template>
                  {{ form.vinNo }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="24">
              <MmvTitle title="违章信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="24" class="table-rf">
              <el-descriptions
                class="margin-top margin-bottom"

                :column="3"
                :labelStyle="{ textAlign: 'left' }"
                border
              >
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章单据号</template>
                  {{ form.documentNo }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章时间</template>
                  {{ form.illegalTime }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章地点</template>
                  {{ form.illegalLocation }}
                </el-descriptions-item>


                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章扣分</template>
                  {{ form.pointsDeduction }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 罚款金额</template>
                  {{ form.illegalFines }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章内容</template>
                  {{ form.illegalDetail }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章附件</template>
                  <template v-if="form.imgList" v-for="(item, index) in form.imgList" > <el-image style="margin-left: 5px;width: 100px;height: 100px" :src="getImgUrl(item)"
                                        :preview-src-list="[getImgUrl(item)]" fit="cover"></el-image></template>
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="24">
              <MmvTitle title="处理信息"></MmvTitle>
            </el-col>
            <el-col :sm="24" :md="24" :lg="24" class="table-rf">
              <el-descriptions
                class="margin-top margin-bottom"
                :column="4"

                :labelStyle="{ textAlign: 'left' }"
                border
              >
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 处理信息</template>
                  {{
                    {
                      1: '客户处理',
                      2: '公司处理',
                    }[Number(form.payPersonType)]
                  }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 处理状态</template>
                  {{
                    {
                      1: '未处理',
                      2: '已处理未缴费',
                      3: '已处理',
                      4: '已缴费未处理',
                    }[Number(form.processingStatus)]
                  }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 违章手续费</template>
                  {{ form.illegalPoundage }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label" >
                  <template slot="label"> 缴费总金额</template>
                  {{ form.totalMoney }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import { getIllegal } from '@/api/car/illegal'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import CustomContent from '@/components/custom/content.vue'

export default {
  components: {
    MmvTitle,
    CustomContent,
  },
  data() {
    return {
      id: null,
      showxcheliang: false,
      loading: false,
      form: {
        carId: '',
        carNo: '',
        vinNo: '',
        carInfo: '',
        documentNo: '',
        illegalTime: '',
        illegalLocation: '',
        illegalType: '',
        illegalDetail: '',
        pointsDeduction: '',
        illegalFines: '',
        processingStatus: 1,
        processingAgency: '',
        illegalPoundage: '',
        totalMoney: '',
        payPersonType: 1,
        repayment: 1,
        handlers: '',
      },
    }
  },
  mounted() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getData()
    }
  },
  methods: {
    validate() {
      return new Promise((resolve) => {
        this.$refs['form'].validate((valid) => {
          resolve(valid)
        })
      })
    },
    emitData() {
      return this.form
    },
    getData() {
      this.loading = true
      getIllegal(this.id).then((response) => {
        this.form = response.data
        this.loading = false
      })
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    submitcheliang(data) {
      this.showxcheliang = false
      this.form.carId = data.carId
      this.form.carNo = data.carNo
      this.form.vinNo = data.vinNo
      this.form.carInfo = data.carInfo
    },
  },
}
</script>
